谈谈 shouldComponentUpdate
是什么
shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate 方法是一个生命周期方法，当 React 渲染 一个组件时，这个方法不会被调用 ，并根据返回值来判断是否要继续渲染组件。默认值是 true， 即 state 每次发生变化组件都会重新渲染。
示例
禁止组件渲染
shouldComponentUpdate() 方法返回 false 时执行的操作（点击按钮无法修改）
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "runoob"};
}
// 重点！！
shouldComponentUpdate() {
return false;
}
changeSite = () => {
this.setState({favoritesite: "google"});
}
render() {
return (
<div>
<h1>我喜欢的网站是 {this.state.favoritesite}</h1>
<button type="button" onClick={this.changeSite}>修改</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
组件正常渲染
shouldComponentUpdate() 方法返回 true 时执行的操作（点击按钮可以修改）
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "runoob"};
}
// 重点！！
shouldComponentUpdate() {
return true;//默认值为true
}
changeSite = () => {
this.setState({favoritesite: "google"});
}
render() {
return (
<div>
<h1>我喜欢的网站是 {this.state.favoritesite}</h1>
<button type="button" onClick={this.changeSite}>修改</button>
</div>
);
}
}
ReactDOM.render(<Header />, document.getElementById('root'));
解决了什么（shouldComponentUpdate 的作用）
- 用于在没有必要更新 UI 的时候返回 false，以提高渲染性能